<template>
  <ele-page flex-table>
    <ele-card flex-table :body-style="{ paddingBottom: 0 }">
      <ele-pro-table ref="tableRef" row-key="id" :columns="columns" :datasource="datasource" :tools="false"
        v-model:selections="selections" :footer-style="{ paddingBottom: '20px' }">
        <template #toolbar>
          <toolbar @reload="reload" @add="openEdit" @del="handelDel"></toolbar>
        </template>
        <template #status="{ row }">
          <el-tag v-if="row.status == '1'" type="primary">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
        <template #actions="{ row }">
          <el-space>
            <el-link type="primary" underline="never" @click="openCfg(row)">
              模块权限
            </el-link>
            <el-divider direction="vertical" style="margin: 0" />
            <el-link type="primary" underline="never" @click="openEdit(row)">
              编辑
            </el-link>
            <el-divider direction="vertical" style="margin: 0" />
            <el-popconfirm :width="190" placement="top-end" title="确定要删除模块吗?">
              <template #reference>
                <el-link type="danger" underline="never">删除</el-link>
              </template>
            </el-popconfirm>
          </el-space>
        </template>
      </ele-pro-table>
      <edit v-model="showEdit" :data="currentNode" @reload="reload"></edit>
      <module-cfg v-model="showCfg" :tenant="currentNode"></module-cfg>
    </ele-card>
  </ele-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EleMessage, type EleProTable } from 'ele-admin-plus';
import type { Columns, DatasourceFunction, } from 'ele-admin-plus/es/ele-pro-table/types';
import { queryPage, del } from '@/api/system/SysTenant';
import type { SysTenant } from '@/api/system/SysTenant/model.ts';
import toolbar from './components/toolbar.vue';
import edit from './components/edit.vue';
import moduleCfg from './components/moduleCfg.vue';

const showEdit = ref<boolean>(false)
const showCfg = ref<boolean>(false)
const currentNode = ref<SysTenant | null>(null)
const selections = ref<SysTenant[]>([])
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
const columns = ref<Columns>([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 60,
    align: 'center'
  },
  {
    prop: 'name',
    label: '租户名称',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'shortName',
    label: '系统标题',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    slot: 'status',
    label: '状态',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'sort',
    label: '排序',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'code',
    label: '租户编码',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'comment',
    label: '备注说明',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    slot: 'actions',
    label: '操作',
    align: 'center',
    showOverflowTooltip: true
  },
]);

const datasource: DatasourceFunction = async ({ page, limit }) => {
  const res = await queryPage({ pageNo: page!, pageSize: limit! })
  return res.data
};

const reload = () => {
  tableRef.value?.reload()
}

const openCfg = (data: SysTenant) => {
  currentNode.value = data
  showCfg.value = true
}

const openEdit = (data?: SysTenant) => {
  if (data) {
    currentNode.value = data
  } else {
    currentNode.value = null
  }
  showEdit.value = true
}

const handelDel = async (id?: string) => {
  console.log(selections.value)
  if (!id && !selections.value.length) {
    EleMessage.error('无选中数据')
    return
  }
  const res = await del(id ? [id] : selections.value.map(e => e.id!))
  if (res.code == 200) {
    EleMessage.success('删除成功')
    reload()
  } else {
    EleMessage.error('删除失败')
  }
}

</script>

<style scoped></style>
